<template>
    <view class="order-book-card common-flex-between">
        <view class="books">
            <view class="book-item" v-for="(item, index) in books" :key="index">
                <image :src="item"/>
            </view>
        </view>
        <view class="book-acount"  @tap.stop="watchOrderBooks">
            <view>
                共计{{books.length}}本书<br/>
                <text style="color: #999; font-size: 24rpx;">消耗{{booksNum}}书位</text>
            </view>
            <text class="icon-arrow-right icon-btn"/>
        </view>
    </view>
</template>

<script>
    export default {
        name: "orderBookCard",
        props: {
            books: {
                default: ()=>[1,2,3],
                type: Array
            },
            booksNum: {
                default: 0,
                type: Number
            },
            orderId: {
                default: '',
                type: String
            },
        },
        methods: {
            watchOrderBooks(){
                uni.navigateTo({
                    url: `./order-books?orderId=${this.orderId}`
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .order-book-card{
        .books{
            flex: 0 0 500rpx;
            height: 120rpx;
            overflow: hidden;
            .book-item{
                width: 160rpx;
                height: 120rpx;
                float: left;
                margin-right: 10rpx;
                &:nth-of-type(3){
                    margin-right:0;
                }
                image{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .book-acount{
            display: flex;
            flex-grow: 1;
            height: 120rpx;
            align-items: center;
            justify-content: space-between;
            margin-left: 20rpx;
        }
        .icon-btn{
            float: right;
        }
    }


</style>